function row(title, inputHtml){
    let html = '<div class="row">';
        html+= '<label class="col-sm-3 col-form-label">'+title+'</label>';
        html+= '<div class="col-sm-9">';
        html+= inputHtml;                
        html+= "</div>";
        html+= '</div>';

    return html;
}

function input(id,defaultValue='',placeholder="",type="text"){
    return '<input type="'+type+'" class="form-control" id="'+id+'" placeholder="'+placeholder+'" value="'+defaultValue+'" />';
}


function select(id,option,defaultValue=''){
    let html = '<select class="form-select" id="'+id+'" >';
        for(let i in option){
            let selected = (defaultValue==option[i].value)?'selected':''; 
            //selected
            let o = option[i];
            if (typeof option[i] != 'object' ){
                o = {label:option[i], value:option[i]}; 
            }

            html+='<option value="'+o.value+'"  '+selected+' >'+o.label+'</option>';
        }
        html+='</select>';

    return html;
}


function appHtml(app){
    let html = '';
        html+= '<div class="icon"><img src="'+app.icon+'"></div>';
        html+= '<div class="info">';
        html+= '<div class="title">'+app.title+'<span class="version">v'+app.version+'</span></div>';
        html+= '<div class="description">'+app.description+'</div>';
        html+= '<div class="homepage"><a href="'+app.url+'" target="_blank">'+app.url+'</a></div>';
        html+= '</div>';
        html+= '';

    return html;
}